<!DOCTYPE html>
<html ng-app="myApp" style="height: 100%">
<head lang="en">
    <meta charset="UTF-8">
    <title>datagrid综合示例</title>
    <link rel="stylesheet" href="../../themes/default/wi-all.css"/>
    <script src="../../lib/angular-1.3.6/angular.min.js"></script>

    <!--<script src="../../build/WebUI4Angular-tpls-all-mini.js"></script>-->

    <script src="../resizelistener/resizelistener.js"></script>
    <script src="../position/position.js"></script>
    <script src="../bindHtml/bindHtml.js"></script>
    <script src="../popup/popup.js"></script>
    <script src="../progress/progress.js"></script>
    <script src="datagrid.js"></script>

    <script src="../../misc/js/ng-stats.js"></script>
    <style>
        #statsDiv {
            position: fixed;
            top: 5px;
            right: 120px;
            background-color: #121212;
            color: blue;
        }
        .watch-count {
            color: #ff0000;
        }
        .digest-length {
            color: #ff0000;
        }
    </style>
</head>
<body ng-controller="datagridCtrl">
<wi-datagrid wid="dg" dataprovider="pagedata" headerheight="40" width="95%" height="335" hscrollpolicy="auto"
             multiselect="true" showno='true' itemclick="itemClick"
             rowheight="35" pagemode="client" borderdirection="horizontal" wordwrap="true"
             showexcel="true" rowcolorfunction="myRowColorFunction" treefield="username" collapse="true"
             columns="columnDefs"
             pagemode="client" pageselect="[20,30,40,50,60,100,200]">

    <wi-datagrid-column headtext="标题1" datafield="username" align="center" sortable="true" ></wi-datagrid-column>

    <wi-datagrid-column headtext="进度" datafield="progress"  width="150" itemrenderer="sexItemRender" >
        <script type="text/ng-template"  id="sexItemRender">
            <wi-progress value="pdata.progress" label="pdata.progress"></wi-progress>
        </script>
    </wi-datagrid-column>
</wi-datagrid>
<br><br>
<script>
    angular.module('myApp', ['ui.wisoft.datagrid', 'ui.wisoft.bindHtml', 'angularStats', 'ui.wisoft.popup','ui.wisoft.progress']).controller('datagridCtrl', datagridCtrl)
    function datagridCtrl($scope, $timeout,$interval) {
        //dg作为外部和内部组件通信的一种渠道，
        // 通过这种双向绑定的方式，外部可以调用到组件的方法，组件也可以调用到外部的方法
        var dg = $scope.dg = {};
        $scope.pagedata = [];

        var initTreeGrid = function (rowcount) {
            var initData = [];
            for (var i = 0; i < rowcount; i++) {
                var obj = {};
                obj.username = '朱云山 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' + i;
                obj.sex = i % 2;
                obj.progress = i;
                obj.children = [];
                obj.dy1 = 'dy1';
                obj.dy2 = 'dy2';
                for (var j = 0; j < 3; j++) {
                    var child = {
                        username: obj.username + '-' + j,
                        progress: i+j+1,
                        sex: j % 2,
                        dy1: 'dy1',
                        dy2: 'dy2'
                    };
                    obj.children.push(child);
                }
                initData.push(obj);
            }
            return initData;
        };

        $timeout(function () {
            $scope.pagedata = initTreeGrid(100);
        }, 150);

        $scope.columnDefs = [
            {'headtext': '动态标题group', children: [
                {'headtext': '动态标题1', 'datafield': 'dy1'},
                {'headtext': '动态标题2', 'datafield': 'dy2'}
            ]}
        ];

        //返回颜色值
        $scope.myRowColorFunction = function (data) {
            if (data.progress == 0) {
                return "#6BA95B";
            }
        };

        var progressTimer;
        $scope.itemClick = function(data){
            if(data.progress == 100){
                data.progress = 0;
            }
            if(progressTimer){
                $interval.cancel(progressTimer);
                progressTimer = undefined;
            }
            else{
                progressTimer = $interval(function(){
                    if(data.progress < 100) data.progress ++;
                },300);
            }
        };

        /**
         * 因为itemrender是直接include进组件的，而组件的scope不是原型继承的,所以itemrender中调用的方法是没有办法直接调用到外面scope中的方法，
         * 通过 pdata 可以获得行绑定的数据
         * 组件scope的wid和外面scope的dg是双向绑定的，所以itemrenderer中可以通过wid.xxx的方式来访问dg.xxx的方法
         *
         * @param event
         */
        dg.test = function (event, itemData) {
            console.log(event);
            console.log(itemData);
            console.log('........');
            itemData.username1 = 'zzzzzz';
            event.stopPropagation();
        }
    }
</script>
</body>
</html>